<template>
    <el-container style="height: 100%">
        <el-header style="position: fixed;z-index: 9;width: 100%">
            <h1 class="title">
                        <span style="color: #5f5b5b">
                            当前位置 ：
                        </span>
                任务日志
            </h1>
        </el-header>
        <el-main style="background: #F0F0F066;margin-top:45px">
            <el-row>
                <el-col :span="24">
                    <el-row :gutter="10">
                        <el-card>
                            <el-row>
                                <h1 style="font-size: 1.4em">日志列表</h1>
                                <br>
                            </el-row>
                            <el-tabs v-model="activeName" @tab-click="handleClick">
                                <el-tab-pane label="全部日志" name="first">
                                    <user-log-table :table-data="tableData" :path="path" :history-path="historyPath"
                                                    :cur-page="curPage"
                                                    @updateData="updateData"/>
                                </el-tab-pane>
                                <el-tab-pane label="调查任务认领日志" name="second">
                                    <user-log-table :table-data="tableData" :path="path" :history-path="historyPath"
                                                    :cur-page="curPage"
                                                    @updateData="updateData"/>
                                </el-tab-pane>
                                <el-tab-pane label="调查数据包更新日志" name="third">
                                    <user-log-table :table-data="tableData" :path="path" :history-path="historyPath"
                                                    :cur-page="curPage"
                                                    @updateData="updateData"/>
                                </el-tab-pane>
                                <el-tab-pane label="调查任务质检日志" name="fourth">
                                    <user-log-table :table-data="tableData" :path="path" :history-path="historyPath"
                                                    :cur-page="curPage"
                                                    @updateData="updateData"/>
                                </el-tab-pane>
                                <el-tab-pane label="调查任务入库日志" name="fifth">
                                    <user-log-table :table-data="tableData" :path="path" :history-path="historyPath"
                                                    :cur-page="curPage"
                                                    @updateData="updateData"/>
                                </el-tab-pane>
                            </el-tabs>
                        </el-card>
                        <admin-page :page-size="pageSize" ref="adminPage" @updateData="updateData"
                                    :total="total" @currentChange="currentChange"/>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    import UserLogTable from "../../../components/admin/table/userLog/UserLogTable";
    import AdminPage from "../../../components/admin/menu/AdminPage";
    import qs from "qs";

    export default {
        name: "userLog",
        components: {
            UserLogTable,
            AdminPage
        },
        data() {
            return {
                activeName: 'first',
                tableData: [],
                beginPos: '',
                curPage: 1,
                pageCount: 6,
                pageSize: 10,
                total: 0,
                taskState: 0,
                logType: 0,
                path: 'TrafficNode',
                historyPath: 'TrafficHistory'
            }
        },
        mounted() {
            this.updateData(this.curPage, this.state);
        },
        methods: {
            handleClick(tab) {
                let logType = tab.index == 0 ?
                    0 : tab.index == 1 ?
                        1 : tab.index == 2 ?
                            2 : tab.index == 3 ?
                                3 : tab.index == 4 ?
                                    4 : 5;
                this.updateData(1, logType);
            },
            to(path) {
                this.$router.push({name: path});
            },
            currentChange(curpage) {
                this.updateData(curpage, this.state);
            },
            updateData(curPage, logType) {
                this.pageSize = this.$refs.adminPage.pageSize;
                this.curPage = curPage === undefined ? this.curPage : curPage;
                this.logType = logType === undefined ? this.logType : logType;
                axios.get("/bjdzms/userLog/findAllByPage",
                    {
                        params: {
                            'page': this.curPage,
                            'rows': this.pageSize,
                            'logType': this.logType,
                        }
                    }).then(res => {
                    console.log(res);
                    this.tableData = [];
                    this.tableData = res.data.rows;
                    this.beginPos = res.data.beginPos;
                    this.curPage = res.data.curPage;
                    this.pageCount = res.data.pageCount;
                    this.total = res.data.total;
                });
            }
        }
    }
</script>

<style scoped>
    .el-header {
        background: #EBEBEB;
        color: #e5e9ef;
        font-size: 2em;
        line-height: 80px;
        border: 5px solid #EBEBEB;
    }

    .el-main {
        background: #fff;
    }

    .el-container {
        height: 100%;
    }

    .title {
        font-size: 14px;
        color: #97a8be;
        font-weight: 400 !important;
    }
</style>
